<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>KPJ</title>
	<link href="css/common.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet">
	<link href="css/userindex.css" rel="stylesheet">
</head>

<body>
	<div class="header">
		<div class="content">
			<a class="logo"></a>
			<ul>
				<li><a href="#">发现</a></li>
				<li><a href="#">旅行家</a></li>
				<li><a href="#">旅行志</a></li>
				<li><a href="#">推荐</a></li>
				<li><a href="#"><img src="img/ico.jpg"/> nick<span></span></a></li>
			</ul>
		</div>
		
	</div>
	
	<div class="container">
		<div class="side">
			<img class="header-ico" src="img/ico2.jpg"/>
			<span class="nick">bubusy</span>
			<br>
			<span class="email">bubusy@163.com</span>
			<span class="gender male">男生</span>
			<a href="#" class="setting">账号设置</a>
			<div class="clear"></div>
			<span class="city">现居城市：<a href="#">浙江&nbsp;杭州</a></span>
			<p class="desc">热爱旅游！坚决不宅！！求关注啊亲！！！@。@<a href="#">编辑</a></p>
			<div class="follows">
				<div class="item"><span>粉丝</span><br/><span class="num">145</span></div>
				<div class="item"><span>关注</span><br/><span class="num">120</span></div>
				<div class="clear"></div>
			</div>
			<div class="nav">
				<a class="selected" href="userindex.html">我的首页</a>
				<a href="mylist.html">我收集的图片（150）</a>
				<a href="myalbumlist.html">我的专辑（10）</a>
			</div>
		</div>
		<div class="main">
			
			<div class="trends">
				<div class="t-top">
					<h3>最新动态</h3>
					<ul class="nav">
						<li class="selected" target="zj"><a href="#">足迹（0）</a></li>
						<li target="xx"><a href="#">消息（0）</a></li>
						<li target="pl"><a href="#">评论（0）</a></li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="t-c">
					<ul class="zj">
						<li>
							<span>收集</span>
							<img src="img/2.jpg"/>
							<span>到<a href="#">默认相册</a></span>
							<span class="from">从<a href="#">feener</a>的<a href="">随便收集</a></span>
							<span class="time">两天前</span>
						</li>
						<li>
							<span>收集</span>
							<img src="img/1.jpg"/>
							<span>到<a href="#">梦想</a></span>
							<span class="from">从<a href="#">feener</a>的<a href="">随便收集</a></span>
							<span class="time">2012年5月1日 09:00</span>
						</li>
						<li>
							<span>收集</span>
							<img src="img/3.jpg"/>
							<span>到<a href="#">梦想</a></span>
							<span class="from">从<a href="#">baidu.com</a></span>
							<span class="time">2012年5月1日 09:00</span>
						</li>
					</ul>
					<ul class="xx">
						<li>
							<img alt="" src="img/ico2.jpg"/>
							<span class="time">一天前</span>
							<span>来自<span class="city">浙江杭州</span>的<a href="#">feener</a></span>
							<br/>
							<span>喜欢了你的<a href="#">随便上传</a></span>
							<div class="clear"></div>
						</li>
						<li>
							<img alt="" src="img/ico2.jpg"/>
							<span class="time">一天前</span>
							<span>来自<span class="city">浙江杭州</span>的<a href="#">feener</a></span>
							<br/>
							<span>收集你的<a href="#">自拍</a>到他的<a href="#">雷人自拍</a></span>
							<div class="clear"></div>
						</li>
						<li>
							<img alt="" src="img/ico2.jpg"/>
							<span class="time">一天前</span>
							<span>来自<span class="city">浙江杭州</span>的<a href="#">feener</a></span>
							<br/>
							<span>在<a href="#">哟，帅锅</a>中@了你！</span>
							<div class="clear"></div>
						</li>
					</ul>
					<ul class="pl">
						<li>
							<img class="img" src="img/2.jpg"/>
							<div class="items">
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@</p>
									<div class="clear"></div>
								</div>
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@我要打一段很长的话。来测试一下这个布局有木有bug！如果没有是最好的。哈哈哈哈！要打一段很长的话。来测试一下这个布局有木有bug！如果没有是最好的。多出来的部分不对齐也挺好看的。</p>
									<div class="clear"></div>
								</div>
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@</p>
									<div class="clear"></div>
								</div>
							</div>
						</li>
						<li>
							<img class="img" src="img/4.jpg"/>
							<div class="items">
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@</p>
									<div class="clear"></div>
								</div>
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@</p>
									<div class="clear"></div>
								</div>
								<div class="item">
									<img src="img/ico2.jpg"/>
									<span><a class="nick" href="#">feener</a>两天前说：</span>
									<p>我也去过。。。。@。@</p>
									<div class="clear"></div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="t-b"><a href="#">查看更多...</a></div>
			</div>
			
			<div class="list" id="list">
				<div class="box">
					<a href="#"><img class="pic" src="img/1.jpg"/></a>
					<p class="des">传媒一日游宅男攻略！</p>
					<ul>
						<li>
							<a href="" class="link img"><img src="img/ico2.jpg"/></a>
							<a class="link" href="#">somebody</a>
							分享了旅游攻略
							<span class="time">5分钟前</span>
						</li>
					</ul>
					
				</div>
				
				<div class="box">
					<a href="#"><img class="pic" src="img/2.jpg"/></a>
					<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
					<ul>
						<li>
							<a href="" class="link img"><img src="img/ico2.jpg"/></a>
							<a class="link" href="#">somebody</a>
							从
							<a class="link" href="#">somewhere</a>
							收集到
							<a class="link" href="#">somewhere</a>
							<span class="time">5分钟前</span>
						</li>
					</ul>
					
				</div>
				
				<div class="box">
					<a href="#"><img class="pic" src="img/3.jpg"/></a>
					<p class="des">ljg lajg j;gjlkjg  ;fgggg ggg gsdfg      sfg</p>
					<ul>
						<li>
							<a href="" class="link img"><img src="img/ico2.jpg"/></a>
							<a class="link" href="#">somebody</a>
							从
							<a class="link" href="#">somewhere</a>
							收集到
							<a class="link" href="#">somewhere</a>
							<span class="time">5分钟前</span>
						</li>
					</ul>
					
				</div>
				
			</div>
		
		</div>
	</div>
	<div class="gotop">
		<a href="#"></a>
	</div>
	
	<script src="js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript">
	function layoutList(){
		$('#list').masonry({
		    itemSelector : "#list .box",
		    containerStyle:{position:'relative'},
		    gutterWidth:17,
		    isAnimated:true,
		    isFitWidth:true
		});
	};
	$('#list').imagesLoaded(function(){
		layoutList();
	});
	
	$('.xx,.pl').hide();
	$('.nav li').click(function(){
		$('.nav li').removeClass('selected');
		$(this).addClass('selected');
		var t=$(this).attr('target');
		$('.zj,.xx,.pl').hide();
		$('.'+t).show();
	})
	
	</script>
</body>
</html>